<!--
 * @Descripttion: 个人信息
 * @version: python 3.6.2
 * @Author: 刘涛
 * @Date: 2021-04-18 20:11:11
 * @LastEditors: 刘涛
 * @LastEditTime: 2021-04-20 15:27:54
-->
{% extends "base.html" %}

{% block title %}用户信息{% endblock %}
{% block user %}class="active"{% endblock %}

{% block content %}
    <div class="container">
        <div class="row">
            <div class="col-md-2">
                <img id="pic" src="/static/image/{% if user.pic %}{{user.pic}}{% else %}messi.jpg{% endif %}" class="info img-responsive img-thumbnail">
            </div>
            <div class="col-md-10">
                <h1 id="name" style="font-size:70px">{{ user.user }}</h1>
                <p style="font-size:50px" id="email" class="info">邮箱: {{ user.user.email}}</p>
            </div>
        </div>
        <div class="row" style="margin-top:62px">
            <div class="col-md-4">
                <p style="font-size:50px">地区</p>
            </div>
            <div class="col-md-8">
                <p style="font-size:50px;color:gray" id="region" class="info">{{user.region}}</p>
            </div>
        </div>
        <hr>
        <div class="row">
            <div class="col-md-4">
                <p style="font-size:50px">个性签名</p>
            </div>
            <div class="col-md-8">
                <p style="font-size:50px;color:gray" id="motto" class="info">{{user.motto}}</p>
            </div>
        </div>
        <hr>
        <div class="row">
            <div class="col-md-4">
                <p style="font-size:50px">相册</p>
            </div>
            <div class="col-md-8">
                <img src="/static/image/messi.jpg" style="width:188px">
            </div>
        </div>        
        <hr>
    </div>
    <script>
        function update_user(){
            $.ajax({
                url:'/update',
                type:'post',
                data:{
                    "motto":$("#motto").val(),
                    "region":$("#region").val(),
                    "email":$("#email").val(),
                    "pic":$("#pic").val(),
                    "csrfmiddlewaretoken":"{{ csrf_token }}",
                },
                success:function (response){
                    if(response["result"]){
                        alert(response["message"])
                        location.reload()
                    }else{
                        alert(response["message"])
                    }
                }
            })
        }
        $(".info").click(function (){
            $("#motto").replaceWith("<input id='motto' style='font-size:50px;color:gray' value='"+$("#motto").html()+"'>")
            $("#region").replaceWith("<input id='region' style='font-size:50px;color:gray' value='"+$("#region").html()+"'>")
            $("#pic").replaceWith("<input id='pic' style='font-size:50px;color:gray;width:150px;' value='"+$("#pic").html()+"'>")
            $("#email").replaceWith("<input id='email' style='font-size:50px;color:gray' placeholder='Email:' value='"+$.trim($("#email").html().split(":")[1])+"'>")
            $("#name").click(function (){
                update_user()
            })
        })

    </script>

{% endblock %}